<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>科研项目管理系统登入界面</title>
    <link rel="stylesheet" href="css/login.css" />
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript" src="easyui/1.3.4/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script>
       
</head>

<body>
    <p></p>  
<main>
    <div class="box">
        <div class="inner-box">
            <div class="forms-wrap">
                <form action="index.html" autocomplete="off" class="sign-in-form">
                    
					<div class="logo">
                        <img src="images/logo.png" alt="icon" />
                        <h4>科研项目管理系统</h4>
                    </div> 

                    <div class="heading">
                        <h2>欢迎回来</h2>
                        <h6>还没有注册账号？点击</h6>
                        <a href="#" class="toggle">注册</a>
                    </div>

                    <div class="actual-form">
                        <div class="input-wrap">
                            <input
                                    type="text"
                                    minlength="4"
                                    id="username"
                                    class="input-field"
                                    autocomplete="off"
                                    required
                            />
                            <label>用户名</label>
                        </div>

                        <div class="input-wrap">
                            <input
                                    type="password"
                                    id="password"
                                    minlength="4"
                                    class="input-field"
                                    autocomplete="off"
                                    required
                            />
                            <label>密码</label>
                        </div>
                        <div  id="btn" class="sign-btn">登录</div>

                        <p class="text">
                            忘记账号或登录密码？
                            <a href="#">获取帮助</a>
                        </p>
                    </div>
                </form>

				<!-- 注册界面 -->
                <form action="index.html" autocomplete="off" class="sign-up-form">
                    <div class="logo">
                        <img src="images/logo.png" alt="icon" />
                        <h4>教学科研管理系统</h4>
                    </div>

                    <div class="heading">
                        <h2>新用户注册</h2>
                        <h6>已经有账户了吗？</h6>
                        <a href="#" class="toggle">登录</a>
                    </div>

                    <div class="actual-form">
                        <div class="input-wrap">
                            <input
                                    type="text"
                                    minlength="4"
                                    id="usernamereg"
                                    class="input-field"
                                    autocomplete="off"
                                    required
                            />
                            <label>用户名</label>
                        </div>

                    <!--    <div class="input-wrap">
                            <input
                                    type="email"
                                    class="input-field"
                                    autocomplete="off"
                                    required
                            />
                            <label>邮箱</label>
                        </div>-->

                        <div class="input-wrap">
                            <input
                                    type="password"
                                    id="passwordreg"
                                    minlength="4"
                                    class="input-field"
                                    autocomplete="off"
                                    required
                            />
                            <label>密码</label>
                        </div>
                        <input type="submit" value="注册" class="sign-btn" id="register-btn"/>

                        <p class="text">
                            点击 “注册” 即表示您同意我们的
                            <a href="#">用户协议</a> 和
                            <a href="#">隐私政策。</a>
                        </p>
                    </div>
                </form>
            </div>

            <div class="carousel">
                <div class="images-wrapper">
                    <img src="images/picture.jpg" class="image img-1 show" alt="" />
                </div>
            </div>
        </div>
    </div>
</main>

<script>
    const inputs = document.querySelectorAll(".input-field");
    const toggle_btn = document.querySelectorAll(".toggle");
    const main = document.querySelector("main");
    const bullets = document.querySelectorAll(".bullets span");
    const images = document.querySelectorAll(".image");

    inputs.forEach((inp) => {
        inp.addEventListener("focus", () => {
            inp.classList.add("active");
        });
        inp.addEventListener("blur", () => {
            if (inp.value != "") return;
            inp.classList.remove("active");
        });
    });

    toggle_btn.forEach((btn) => {
        btn.addEventListener("click", () => {
            main.classList.toggle("sign-up-mode");
        });
    });

    function moveSlider() {
        let index = this.dataset.value;

        let currentImage = document.querySelector(`.img-${index}`);
        images.forEach((img) => img.classList.remove("show"));
        currentImage.classList.add("show");

        const textSlider = document.querySelector(".text-group");
        textSlider.style.transform = `translateY(${-(index - 1) * 2.2}rem)`;

        bullets.forEach((bull) => bull.classList.remove("active"));
        this.classList.add("active");
    }

    bullets.forEach((bullet) => {
        bullet.addEventListener("click", moveSlider);
    });
    window.onload = () => {
        document.querySelector("#btn").addEventListener("click", () => {
            const username = document.querySelector("#username").value;
            const password = document.querySelector("#password").value;
            if (!username || !password)
                alert("请先填写用户名和密码！")
            else {
                axios.post("http://localhost:8080/teacher/loginadmin", {
                    teacherName: username,
                    teacherPassword: password,
                })
                .then(({data}) => {
                    if (data.data == null) {
                throw new Error(data.msg);
                }           
                alert('登录成功');
                localStorage.setItem("userinfo", JSON.stringify(data.data));
                window.location.href = "adminindex.html";
                })
                .catch(function (error) {
                // 请求失败处理逻辑
                if (error.response) {
                // 请求已发出，但服务器返回状态码不在2xx范围内
                alert('登录失败: ' + error.response.data.message);
                    } else {
                    // 发送请求时出现了一些错误
                    alert('登录失败: ' + error.message);
                }
});  
            }
        })
    }


    document.addEventListener('DOMContentLoaded', function () {
    // 获取注册按钮元素
    var registerBtn = document.getElementById('register-btn');

    // 添加点击事件监听器
    registerBtn.addEventListener('click', function (event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 获取输入的用户名和密码
        const username = document.querySelector('#usernamereg').value;
        const password = document.querySelector('#passwordreg').value;

        // 构建要发送的数据对象
        var data = {
            teacherName: username,
            teacherPassword: password
            // 如果还有其他字段比如邮箱等，也可以在这里添加
        };
        // 发送注册请求的逻辑，使用axios进行POST请求
        axios.post('http://localhost:8080/teacher/reg', {
            teacherName: username,
            teacherPassword: password
        })
        .then(function (response) {

            if (response.data.code !== 1) {
            throw new Error(response.data.msg);
        }
        alert('注册成功');
        window.location.href = "loginuser.html";
        })
        .catch(function (error) {
            // 请求失败处理逻辑
            if (error.response) {
                // 请求已发出，但服务器返回状态码不在2xx范围内
                alert('注册失败: ' + error.response.data.message);
            } else {
                // 发送请求时出现了一些错误
                alert('注册失败: ' + error.message);
            }
        });
    });
});
</script>

</body>
</html>